<template>
  <div class="common-card">
    <header>
      <p class="title"><slot name="title"></slot></p>
      <p><slot name="operate"></slot></p>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>
<style lang="less" scoped>
@import '../style.less';

.common-card {
  border-radius: @big-radius;
  background: #fff;
  padding: 24px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: @gap;

  header {
    display: flex;
    justify-content: space-between;
    padding-left: 16px;

    .title {
      position: relative;
      font-weight: 700;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        left: -16px;
        top: 4.5px;
        position: absolute;
        width: 6px;
        height: 15px;
        background: #4d88ff;
        border-radius: 6px;
      }
    }
  }
}
</style>
